<template>
  <div id='app'>
    <button v-on:click="onAxiosSend">点击我发送Axios请求.</button>
    <img :src="imageUrl" alt="图片">
  </div>

</template>

<script>
import axios from 'axios'//引入axios
export default {
  name: 'AxiosComponent',
  data () {
    // debugger
    return {
      imageUrl: ''
    }
  },
  methods: {
    onAxiosSend: function () {
      var that = this
      axios.get(
        "https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF",//请求接口
        {
          responseType: 'blob'
        }//
      )
      .then(function (res){
        //接口成功返回结果执行
         that.imageUrl = URL.createObjectURL(res.data)
      })
      .catch(function(err){
           console.log("onAxiosSend failed"+err);//请求失败或者接口返回失败或者.then()中的代码发生错误时执行
      })

    }
  }
}
</script>
